<template>
  <div class="regionalManage">
    <!-- 列表 -->
    <div class="list-container" v-if="operateType == 0">
      <div class="add-button" @click="handelOperate(1)">+ 新增区域</div>
      <div class="body">
        <a-spin :spinning="spinning"></a-spin>
        <a-empty description="暂无数据" v-if="listSource.length == 0" />
        <div class="list-item" v-for="(item, index) in listSource" :key="index">
          <div class="header">{{ item.name }}</div>
          <div class="content">
            <div class="viewport">
              <img :src="item.viewPortImage" alt="" />
            </div>
            <div class="operate">
              <!-- 编辑 -->
              <a-tooltip placement="top">
                <template slot="title">编辑</template>
                <icon-font
                  type="icon-a-bianji1"
                  @click="handelOperate(2, item)"
                />
              </a-tooltip>
              <!-- 定位 -->
              <a-tooltip placement="top">
                <template slot="title">定位</template>
                <icon-font
                  type="icon-dingwei"
                  @click="handleLocationViewport(item)"
                />
              </a-tooltip>
              <!-- 删除 -->
              <a-tooltip placement="top">
                <template slot="title">删除</template>
                <icon-font type="icon-a-shanchu1" @click="handelDelete(item)" />
              </a-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增/编辑区域 -->
    <div class="operate-container" v-else>
      <div class="header">新增区域</div>
      <div class="body">
        <!--  -->
        <div class="form-container">
          <a-form-model ref="ruleForm" :model="form" :rules="rules">
            <!-- 所属模块 -->
            <a-form-model-item label="所属模块" prop="module">
              <a-select v-model="form.module" placeholder="请选择所属模块">
                <a-select-option :value="0">
                  全部
                </a-select-option>
                <a-select-option :value="1">
                  港区实景
                </a-select-option>
                <a-select-option :value="2">
                  规划管理
                </a-select-option>
                <a-select-option :value="3">
                  项目千里眼
                </a-select-option>
              </a-select>
            </a-form-model-item>

            <!-- 上级区域 -->
            <a-form-model-item label="上级区域" prop="superior">
              <a-tree-select
                allowClear
                :tree-data="form.superiorData"
                v-model="form.superior"
                tree-default-expand-all
                :replaceFields="{
                  children: 'childs',
                  title: 'name',
                  key: 'uuid',
                  value: 'uuid',
                }"
                placeholder="请选择上级区域"
              >
              </a-tree-select>
            </a-form-model-item>

            <!-- 名称 -->
            <a-form-model-item ref="name" label="名称" prop="name">
              <a-input
                allowClear
                v-model.trim="form.name"
                placeholder="请输入名称"
                @change="handleNameChange($event)"
              />
            </a-form-model-item>

            <!-- 名称样式 -->
            <a-form-model-item
              ref="textStyle"
              label="名称样式"
              prop="textStyle"
            >
              <div class="icon-form-item">
                <div class="button" @click="openTextStyleModal()">
                  点击设置
                </div>
              </div>
            </a-form-model-item>

            <!-- 图标 -->
            <a-form-model-item ref="icon" label="图标" prop="icon">
              <div class="icon-form-item">
                <div class="icon" v-if="form.icon">
                  <img :src="form.icon" alt="" />
                </div>
                <div class="button" @click="openChooseIconModal()">
                  选择图标
                </div>
              </div>
            </a-form-model-item>

            <!-- 位置 -->
            <a-form-model-item
              ref="position"
              label="位置（点击模型自动获取）"
              prop="position"
            >
              <div class="position-form-item">
                <div class="button" @click="getPosition()">点击开始</div>
              </div>
            </a-form-model-item>

            <!-- 视角 -->
            <a-form-model-item
              ref="angle"
              label="视角（默认当前视角）"
              prop="angle"
            >
              <div class="angle-form-item">
                <div class="button" @click="getCamLocate()">点击获取</div>
                <!-- <div class="angle-img"></div> -->
              </div>
            </a-form-model-item>
          </a-form-model>
        </div>
        <!--  -->
        <div class="button-container">
          <a-button class="cancel" :disabled="submitLoading" @click="onCancel()"
            >取消</a-button
          >
          <a-button type="primary" :loading="submitLoading" @click="onSubmit()"
            >保存</a-button
          >
        </div>
      </div>
    </div>
    <!-- 选择图标弹窗 -->
    <chooseIconModal
      :visible.sync="chooseIconModalVisible"
      :image.sync="iconImage"
      @change="handleIconChange($event)"
    ></chooseIconModal>

    <!-- 名称样式弹窗 -->
    <textStyleModal
      :visible.sync="textStyleModalVisible"
      :textColor.sync="form.textColor"
      :textBorderColor.sync="form.textBorderColor"
      @change="textStyleChange($event)"
    ></textStyleModal>
  </div>
</template>
<script>
// 区域管理
import { axios } from "@/utils/request";
import html2canvas from "html2canvas";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import textStyleModal from "./textStyleModal";
import chooseIconModal from "./chooseIconModal";
import { addAttributeByKey, randomUUID } from "@/utils/util.js";
import cloneDeep from "lodash.clonedeep";
import { EventBus } from "@/utils/eventBus";
export default {
  name: "regionalManage",
  inject: ["digitalKey"],
  props: {
    ProbeRet: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    IconFont,
    chooseIconModal,
    textStyleModal,
  },
  data() {
    return {
      spinning: false,
      //0 列表  1新增  2编辑
      operateType: 0,
      listSource: [],
      chooseIconModalVisible: false,
      textStyleModalVisible: false,
      iconImage: {},
      bimGraphId: "",
      submitLoading: false,
      submitSuccess: false,
      positionFlag: false,
      getCamLocateFlag: false,
      form: {
        //所属模块
        module: 0,
        //名称
        name: "",
        //名称字体颜色
        textColor: "#ffffff",
        //名称边框颜色
        textBorderColor: "#000000",
        //上级区域
        superior: undefined,
        superiorData: [],
        //图标
        icon: "",
        //位置
        position: "",
        //视角
        angle: null,
      },
      //拷贝form数据
      formCopy: {},
      rules: {
        position: [
          {
            required: true,
            message: "请选择位置",
          },
        ],
        superior: [
          {
            required: true,
            message: "请选择上级区域",
          },
        ],
        icon: [
          {
            required: true,
            message: "请选择图标",
            trigger: ["change"],
          },
        ],
      },
    };
  },
  computed: {
    digitalKeyVal() {
      return this.digitalKey();
    },
  },
  watch: {
    //监听模型点击
    ProbeRet: {
      handler(val) {
        let { icon } = this.form;
        let { positionFlag } = this;
        if (positionFlag && icon) {
          let { elemPos } = val;
          this.form.position = elemPos;
          this.addAnc(`anc_${this.bimGraphId}`);
        }
      },
    },

    //模块切换
    digitalKeyVal: {
      handler(val) {
        this.resetForm();
        this.getListData();
      },
    },
  },
  mounted() {
    this.getListData();
  },
  methods: {
    //监听名称输入
    handleNameChange() {
      this.editAnc(`anc_${this.bimGraphId}`);
    },

    //监听图标切换
    handleIconChange(icon = {}) {
      this.form.icon = icon.url;
      this.editAnc(`anc_${this.bimGraphId}`);
    },

    //监听名称样式切换
    textStyleChange(val) {
      let { textColor, textBorderColor } = val;
      this.form.textColor = textColor;
      this.form.textBorderColor = textBorderColor;
      this.editAnc(`anc_${this.bimGraphId}`);
    },

    //获取位置
    getPosition() {
      let { icon } = this.form;
      if (!icon) {
        this.$message.warning("请选择图标！");
        return;
      }
      this.positionFlag = true;
      this.$message.success("请点击模型");
    },

    //添加锚点
    addAnc(ancName = "", formData) {
      if (!ancName) {
        return;
      }
      let { position, name, icon, textColor, textBorderColor } =
        formData ?? this.form;
      let tColor = this.hexToRgba(textColor);
      let bColor = this.hexToRgba(textBorderColor);
      this.getImageSize(icon).then((res) => {
        let { width, height } = res;
        let ancList = {
          groupName: `${this.digitalKey()}_anc`,
          ancName: ancName,
          pos: position,
          picPath: icon,
          textInfo: name,
          picWidth: width,
          picHeight: height,
          linePos: [0, 0],
          lineClr: new BlackHole3D.REColor(255, 255, 255, 255),
          ancSize: 60,
          selfAutoScaleDist: -1,
          selfVisDist: -1,
          //字体位置
          texBias: [0, 1],
          //字体颜色
          textClr: new BlackHole3D.REColor(
            tColor?.[0] ?? 255,
            tColor?.[1] ?? 255,
            tColor?.[2] ?? 255,
            255
          ),
          //文字描边
          textBorderClr: new BlackHole3D.REColor(
            bColor?.[0] ?? 255,
            bColor?.[1] ?? 255,
            bColor?.[2] ?? 255,
            255
          ),
          texFocus: [Math.ceil(width / 2), 0],
        };
        BlackHole3D.Anchor.addAnc([ancList]);
      });
    },

    //删除锚点
    deleteAnc(name = "") {
      if (!name) {
        return;
      }
      try {
        let { ancName } = BlackHole3D.Anchor.getAnc(name);
        if (ancName) {
          BlackHole3D.Anchor.delAnc([name]);
        }
      } catch (error) {}
    },

    //修改锚点
    editAnc(name = "") {
      if (!name) {
        return;
      }
      setTimeout((_) => {
        let { ancName } = BlackHole3D.Anchor.getAnc(name);
        //存在锚点-
        if (ancName) {
          //删除锚点
          this.deleteAnc(name);
          //重新添加
          this.addAnc(name);
        }
      });
    },

    //获取模块对应code
    getModuleTypeCode() {
      switch (this.digitalKey()) {
        //港区实景
        case "LiveAction":
          return "1";

        //规划管理
        case "PlanningManage":
          return "2";

        //项目千里眼
        case "DynamicMonitor":
          return "3";

        default:
          break;
      }
    },

    //定位视口
    handleLocationViewport(item = {}, index = 0) {
      let { camDir, camPos, camRotate } = item;
      this.activeIndex = index;
      try {
        var camLoc = new BlackHole3D.RECamLoc();
        camLoc.camPos = JSON.parse(camPos);
        camLoc.camRotate = JSON.parse(camRotate);
        camLoc.camDir = JSON.parse(camDir);
        var locDelay = 0;
        var locTime = 0.5;
        BlackHole3D.Camera.setCamLocateTo(camLoc, locDelay, locTime);
      } catch (error) {}
    },

    //16进制颜色转rgb颜色
    hexToRgba(hex) {
      if (!hex) hex = "#ffffff";
      let r = parseInt("0x" + hex.slice(1, 3));
      let g = parseInt("0x" + hex.slice(3, 5));
      let b = parseInt("0x" + hex.slice(5, 7));
      return [r, g, b];
    },

    // 获取图片尺寸
    getImageSize(src) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = function() {
          const width = img.width;
          const height = img.height;
          resolve({ width, height });
        };
        img.onerror = function() {
          reject(new Error("无法加载图片"));
        };
        img.src = src;
      });
    },

    //查询列表数据
    getListData() {
      return new Promise((resolve, reject) => {
        this.spinning = true;
        axios
          .post(
            `/probusiness/lygPortAreaRegionMarking/queryList`,
            {
              moduleType: Number(this.getModuleTypeCode()),
              type: 1,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { statusCode, data } = res;
            if (statusCode == 200) {
              this.listSource = data ?? [];
              resolve();
            } else {
              this.listSource = [];
              reject();
            }
          })
          .catch((_) => {
            this.listSource = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },

    //查询区域列表
    getAreaList() {
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/lygPortAreaRegionMarking/queryRegionTree`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { statusCode, data } = res;
            if (statusCode == 200) {
              let filterData = addAttributeByKey(
                null,
                "scopedSlots",
                { icon: "custom" },
                data ?? [],
                "childs"
              );
              this.form.superiorData = filterData ?? [];
              resolve();
            } else {
              this.form.superiorData = [];
              reject();
            }
          })
          .catch((_) => {
            this.form.superiorData = [];
            reject();
          });
      });
    },

    //获取相机视角
    getCamLocate() {
      try {
        this.getCamLocateFlag = true;
        let { camDir, camPos, camRotate } = BlackHole3D.Camera.getCamLocate();
        this.form.angle = {
          camDir,
          camPos,
          camRotate,
        };
        this.$message.success("视角获取成功！");
      } catch (error) {
        this.getCamLocateFlag = false;
        this.form.angle = null;
        this.$message.error("视角获取失败，请稍后重试~");
      }
    },

    //打开选择图标弹窗
    openChooseIconModal() {
      this.chooseIconModalVisible = true;
    },

    //打开名称样式弹窗
    openTextStyleModal() {
      this.textStyleModalVisible = true;
    },

    //新增 编辑
    handelOperate(type = 0, item = {}) {
      let {
        moduleType,
        parentId,
        name,
        icon,
        portCoordinates,
        camDir,
        camPos,
        camRotate,
        viewPortImage,
        textColor,
        textBorderColor,
        uuid,
      } = item;
      this.operateType = type;
      //新增
      switch (type) {
        //新增
        case 1:
          this.getAreaList();
          this.bimGraphId = randomUUID();
          this.form.module = 0;
          this.form.superior = undefined;
          this.form.name = "";
          this.form.textColor = "#ffffff";
          this.form.textBorderColor = "#000000";
          this.form.icon = "";
          this.form.position = "";
          this.form.angle = "";
          this.form.viewPortImage = "";
          break;

        //编辑
        case 2:
          this.bimGraphId = uuid;
          //所属模块
          this.form.module = Number(moduleType) || 0;
          //所属区域
          this.form.superior = parentId || undefined;
          //名称
          this.form.name = name;
          //名称样式
          this.form.textColor = textColor;
          this.form.textBorderColor = textBorderColor;
          //图标
          this.form.icon = icon;
          //位置
          this.form.position = JSON.parse(portCoordinates);
          //视角
          this.form.angle = {
            camDir: JSON.parse(camDir),
            camPos: JSON.parse(camPos),
            camRotate: JSON.parse(camRotate),
          };
          //视角截图
          this.form.viewPortImage = viewPortImage;
          //拷贝原有数据
          this.formCopy = cloneDeep(this.form);
          this.getAreaList();
          break;

        default:
          break;
      }
    },

    //删除属性
    handelDelete(item = {}) {
      let that = this;
      let { uuid } = item;
      that.$confirm({
        title: "提示",
        content: "确定删除该数据吗？删除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          axios
            .post(
              `/probusiness/lygPortAreaRegionMarking/deleteBatch?varchar=${uuid}`,
              {},
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("删除成功", 1.5);
                that.$parent.getBimLayerSource("handleActive");
                EventBus.$emit("regionalUpdate", {
                  event: "delete",
                  data: {
                    uuid,
                  },
                });
                //删除对应锚点
                BlackHole3D?.Anchor?.delAnc([`anc_${uuid}`]);
                that.getListData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //保存
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          let { getCamLocateFlag, operateType } = this;
          let { elemPos } = this.ProbeRet;
          let {
            module,
            superior,
            textColor,
            textBorderColor,
            angle,
            name,
            icon,
          } = this.form;
          setTimeout((_) => {
            this.getImageSize(icon).then(async (imgRes) => {
              //图标尺寸
              let { width, height } = imgRes;
              //视角位置
              let angleValue = {};
              if (!angle) {
                angleValue = BlackHole3D.Camera.getCamLocate();
              } else {
                angleValue = angle;
              }
              let { camDir, camPos, camRotate } = angleValue;
              //接口参数
              let params = {
                //类型 【1区域 2片区 3标记】
                type: 1,
                //所属模块
                moduleType: module,
                //上级区域
                parentId: superior || "",
                //名称
                name,
                //字体颜色
                textColor,
                //字体边框颜色
                textBorderColor,
                //图标
                icon,
                iconWidth: width,
                iconHeight: height,
                //位置
                portCoordinates: JSON.stringify(elemPos),
                //视角
                camDir: JSON.stringify(camDir),
                camPos: JSON.stringify(camPos),
                camRotate: JSON.stringify(camRotate),
              };
              //视口缩略图
              if (operateType == 1 || getCamLocateFlag) {
                let { url } = await this.upLoadFile();
                params.viewPortImage = url;
              }
              if (operateType == 1) {
                //新增
                this.saveApi(params);
              } else if (operateType == 2) {
                //编辑
                this.editApi(params);
              }
            });
          }, 500);
        } else {
          return false;
        }
      });
    },

    //上传截图
    upLoadFile() {
      return new Promise((resolve, reject) => {
        const canvas = document.getElementById("blackHoleCanvas");
        canvas.toBlob((blob) => {
          const file = new File([blob], randomUUID() + ".png", {
            type: "image/png",
          });
          let formData = new FormData();
          formData.append("bucket", "datav");
          formData.append("file", file);
          axios
            .post(`/document/minio/uploadfile`, formData, {
              headers: {
                "Content-Type": "multipart/form-data",
              },
            })
            .then((res) => {
              let { statusCode, dfsFileUuid, url } = res;
              if (statusCode == 200) {
                resolve({ dfsFileUuid, url });
              } else {
                this.$message.error("保存失败，请稍后重试！");
                reject();
              }
            })
            .catch((_) => {
              this.$message.error("保存失败，请稍后重试！");
              reject();
            });
        }, "image/png");
      });
    },

    //新增保存
    saveApi(params = {}) {
      axios
        .post(`/probusiness/lygPortAreaRegionMarking/save`, params, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          let { statusCode, data } = res;
          let { uuid } = data;
          if (statusCode == 200) {
            this.submitSuccess = true;
            this.$message.success({
              content: "区域保存成功！",
              key: "loadingKey",
              duration: 2,
            });
            this.$parent.getBimLayerSource("handleActive");
            EventBus.$emit("regionalUpdate", {
              event: "add",
              data: {
                uuid,
              },
            });
            //查询列表数据
            this.getListData();
            //
            this.onCancel();
          } else {
            this.submitSuccess = false;
            this.$message.error("保存失败，请稍后重试！");
          }
        })
        .catch((_) => {
          this.submitSuccess = false;
          this.$message.error("保存失败，请稍后重试！");
        })
        .finally((_) => {
          this.submitLoading = false;
        });
    },

    //编辑保存
    editApi(params = {}) {
      let { bimGraphId } = this;
      axios
        .post(
          `/probusiness/lygPortAreaRegionMarking/update`,
          { ...params, uuid: bimGraphId },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { statusCode, data } = res;
          let { uuid } = data;
          if (statusCode == 200) {
            this.submitSuccess = true;
            this.$message.success({
              content: "区域编辑成功！",
              key: "loadingKey",
              duration: 2,
            });
            //更新原有锚点id
            // this.deleteAnc(`anc_${this.bimGraphId}`);
            // this.bimGraphId = uuid;
            // this.addAnc(`anc_${this.bimGraphId}`);
            this.$parent.getBimLayerSource("handleActive");
            EventBus.$emit("regionalUpdate", {
              event: "edit",
              data: {
                uuid,
              },
            });
            //查询列表数据
            this.getListData();
            //
            this.onCancel();
          } else {
            this.submitSuccess = false;
            this.$message.error("编辑失败，请稍后重试！");
          }
        })
        .catch((_) => {
          this.submitSuccess = false;
          this.$message.error("编辑失败，请稍后重试！");
        })
        .finally((_) => {
          this.submitLoading = false;
        });
    },

    //二维码-单张下载-图片
    async downloadQrCode() {
      return new Promise(async (resolve) => {
        let htmlName = document.getElementById("bim-container");
        let canvas = await html2canvas(htmlName);
        let dataUrl = canvas.toDataURL("image/png");
        resolve(dataUrl);
      });
    },

    //取消
    onCancel() {
      switch (this.operateType) {
        //新增
        case 1:
          //没有保存-直接删除当前锚点
          if (!this.submitSuccess) {
            this.deleteAnc(`anc_${this.bimGraphId}`);
          }
          break;

        //编辑
        case 2:
          if (!this.submitSuccess) {
            let ancName = `anc_${this.bimGraphId}`;
            this.deleteAnc(ancName);
            this.addAnc(ancName, this.formCopy);
          }
          break;

        default:
          break;
      }
      this.resetForm();
    },

    //重置表单
    resetForm() {
      //取消保存状态
      this.submitSuccess = false;
      //取消位置选择状态
      this.positionFlag = false;
      this.formCopy = undefined;
      //重置表单
      this.$refs?.ruleForm?.resetFields();
      //返回列表页
      this.operateType = 0;
    },
  },
};
</script>
<style lang="less" scoped>
.regionalManage {
  width: 100%;
  height: 100%;
  //列表
  .list-container {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 16px 0 0 0;
    flex-direction: column;
    overflow: hidden;
    .add-button {
      height: 32px;
      border-radius: 4px;
      border: 1px solid #00d5ff;
      display: flex;
      color: #00d5ff;
      font-size: 14px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      margin: 0 16px 16px 16px;
    }
    .body {
      flex: 1;
      box-sizing: border-box;
      padding: 0 16px 0 16px;
      margin-bottom: 16px;
      overflow: auto;
      position: relative;
      .ant-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.5;
      }
      .ant-spin {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .list-item {
        height: 108px;
        background: rgba(0, 213, 255, 0.2);
        border-radius: 4px;
        border: 1px solid #1f90a6;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        border-radius: 4px;
        overflow: hidden;
        &:not(:last-child) {
          margin-bottom: 10px;
        }
        .header {
          height: 30px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 10px;
          color: #eef9ff;
          flex-shrink: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          background: rgba(0, 213, 255, 0.4);
        }
        .content {
          flex: 1;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .viewport {
            width: 96px;
            height: 56px;
            border-radius: 4px;
            background: #0f8fae;
            flex-shrink: 0;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .operate {
            display: flex;
            flex: 1;
            justify-content: center;
            margin-left: 10px;
            .anticon {
              color: #00d5ff;
              font-size: 18px;
              cursor: pointer;
              &:not(:first-child) {
                margin-left: 20px;
              }
            }
          }
        }
      }
    }
  }
  //新增/编辑
  .operate-container {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 16px 0 0 0;
    flex-direction: column;
    overflow: hidden;
    .header {
      height: 16px;
      font-size: 14px;
      margin: 0 16px 10px 16px;
      display: flex;
      align-items: center;
      color: #00d5ff;
      flex-shrink: 0;
      &:before {
        content: "";
        display: flex;
        height: 100%;
        width: 3px;
        border-radius: 2px;
        background: #00d5ff;
        margin-right: 10px;
      }
    }
    .body {
      flex: 1;
      box-sizing: border-box;
      padding: 0 0 0 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .form-container {
        padding-right: 16px;
        flex: 1;
        overflow: auto;
        /deep/.ant-form {
          .ant-form-item-label {
            line-height: 20px;
            label {
              color: #eef9ff;
            }
          }
          .ant-form-item-control-wrapper {
            //清空按钮
            .anticon-close-circle {
              color: #eef9ff;
            }
            //箭头图标
            .anticon-down {
              color: #eef9ff;
            }
            //选择框
            .ant-select {
              .ant-select-selection {
                background-color: rgba(0, 213, 255, 0.1);
                border-color: #00d5ff;
                color: #eef9ff;
              }
              .ant-select-selection__clear {
                background: none;
              }
            }
            //输入框
            .ant-input {
              background: rgba(0, 213, 255, 0.1);
              border: 1px solid #00d5ff;
              color: #eef9ff;
            }
            //选择图标
            .icon-form-item {
              display: flex;
              padding: 4px 0 4px 0;
              .icon {
                height: 32px;
                width: 32px;
                margin-right: 16px;
                background: rgba(0, 213, 255, 0.1);
                line-height: 32px;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
              .button {
                width: 86px;
                height: 32px;
                background: rgba(0, 213, 255, 0.1);
                border-radius: 4px;
                border: 1px solid #00d5ff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #00d5ff;
                font-size: 14px;
              }
            }
            //选择位置
            .position-form-item {
              display: flex;
              padding: 4px 0 4px 0;
              .button {
                width: 86px;
                height: 32px;
                background: rgba(0, 213, 255, 0.1);
                border-radius: 4px;
                border: 1px solid #00d5ff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #00d5ff;
                font-size: 14px;
              }
            }
            //选择视角
            .angle-form-item {
              display: flex;
              flex-direction: column;
              padding: 4px 0 4px 0;
              .button {
                width: 86px;
                height: 32px;
                background: rgba(0, 213, 255, 0.1);
                border-radius: 4px;
                border: 1px solid #00d5ff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: #00d5ff;
                font-size: 14px;
              }
              .angle-img {
                width: 86px;
                height: 86px;
                background: rgba(0, 213, 255, 0.1);
                margin-top: 10px;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
            }
          }
        }
      }
      .button-container {
        flex-shrink: 0;
        padding: 16px 0 30px 0;
        display: flex;
        justify-content: center;
        button {
          &:not(:first-child) {
            margin-left: 24px;
          }
          &.cancel {
            background: rgba(0, 213, 255, 0.2);
            border: 1px solid rgba(0, 213, 255, 0.2);
            color: #b8f3ff;
          }
          &.ant-btn-primary {
            color: #fff;
            background: #00d5ff !important;
            border: 1px solid #00d5ff;
          }
        }
      }
    }
  }
}
</style>
